<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
		<meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
		<title>故障提交页面(frame)</title>
		<link rel="stylesheet" type="text/css" href="../css/api.css"/>
		<link rel="stylesheet" type="text/css" href="../css/common.css"/>
		<link rel="stylesheet" type="text/css" href="../css/complaint_details.css"/>
		<style>
			body {
			}
			.f-1 {
				color: rgba(153,153,153,153);
				font-size: 15px;
			}
			.f-2 {
				color: #101010;
				font-size: 15px;
			}
			.m-l {
				margin-left: 12px;
			}
			#main {
				padding: 10px 15px 15px 15px;
			}

			.input-container {
				margin-top: 15px;
			}
			.input-container > div:nth-child(2) {
				height: 30px;
				line-height: 30px;
				border: #C2C2C2 1px solid;
				border-radius: 5px;
				padding: 0 15px;
			}

			.input-container input {
				width: 100%;
				outline: none;
			}
			.mg-t {
				margin-top: 15px;
			}
			.radio-container input {
				background: red;
			}
			/* 描述输入框 */
			.input-compldescribe-container {
				padding: 10px;
				border: #aaaaaa 1px solid;
				border-radius: 5px;
			}
			#input-compldescribe {
				min-height: 85px;
				width: 100%;
				outline: none;
			}
			#input-compldescribe-words-n {
				text-align: right;
			}
			#input-compldescribe-words-n:after {
				content: "/150字";
				color: rgba(153,153,153,153);
			}
			/*网络类型*/
			.net-type-container.active {
				display: none;
			}
			#btn-wifi-container {
				margin-left: 30px;
			}

		</style>
	</head>
	<body>
		<div id="main">

			<div class="input-container flex-container flex-center-v">
				<div class="f-1">
					<nobr>
						报障姓名：
					</nobr>
				</div>
				<div id="get-box-s" class="flex-item">
					<input id="name" class="f-2" type="text" placeholder="请输入姓名" readonly="true"/>
				</div>
			</div>
			<div class="input-container flex-container flex-center-v">
				<div class="f-1">
					<nobr>
						联系电话：
					</nobr>
				</div>
				<div class="flex-item">
					<input id="phone" type="text" class="f-2" placeholder="请输入联系电话" readonly="true"/>
				</div>
			</div>

			<div id="cardnumber" class="input-container flex-container flex-center-v">
				<div class="f-1">
					<nobr>
							校园卡号：
					</nobr>
				</div>
				<div class="flex-item">
					<input id="student" type="text" class="f-2" placeholder="请输入校园卡号"/>
				</div>
			</div>

			<div id="place-container" class="input-container flex-container flex-center-v">
				<div class="f-1">
					<nobr>
						故障地点：
					</nobr>
				</div>
				<div class="flex-item">
					<div id="place" class="f-2 icon-arrow-bottom">
           请选择
					</div>
				</div>
			</div>
			<div class="input-container flex-container flex-center-v">
				<div class="f-1">
					<nobr>
						具体地点：
					</nobr>
				</div>
				<div class="flex-item">
					<input id="specific-place" class="f-2" type="text" placeholder="请输入具体地点"/>
				</div>
			</div>
			<div class="net-type-container active mg-t flex-container flex-center-v">
				<div class="f-1">
					<nobr>
						网络类型：
					</nobr>
				</div>
				<div class="flex-container">
					<div id='btn-wbn-container' class="flex-container flex-center-v">
						<div id="btn-wbn" class="icon-normal icon-checked-normal"></div>
						<div class="f-2 m-l">
							<nobr>
								宽带网络
							</nobr>
						</div>
					</div>
					<div id='btn-wifi-container' class="flex-container flex-center-v">
						<div id="btn-wifi" class="icon-normal icon-checked-normal"></div>
						<div class="f-2 m-l">
							<nobr>
								WiFi
							</nobr>
						</div>
					</div>
				</div>
			</div>
			<div id="title-container" class="input-container flex-container flex-center-v">
				<div class="f-1">
					<nobr></nobr>
					故障情况：
				</div>
				<div class="flex-item flex-item1">
					<div id="title"  class="f-2 icon-arrow-bottom">
           请选择
					</div>
				</div>
			</div>
			<div class="mg-t input-compldescribe-container f-2">
				<textarea id="input-compldescribe" placeHolder="请输入报障详情" maxlength="300"></textarea>
				<div id="input-compldescribe-words-n">
					0
				</div>
			</div>
			<div class="camera-container">
				<img id="get-pic" class="camera-container-img" src="" />
				<div id="delete-pic" class="camera-container-delete"></div>
			</div>
		</div>
	</body>
	<script type="text/javascript" src="../script/api.js"></script>
	<script type="text/javascript" src="../script/common.js"></script>
	<script type="text/javascript" src="../script/request.js"></script>
	<script type="text/javascript">
		//打开pop的tag。选图片==1;选地点==2;选情况==3;
		var mPopTag = 1;
		//图片base64
		var mPic64;
		//userid
		var mUserId;
		var mUserNickName;
		var mUserPhone;
		var mUserAreaId;
		var mStudentNumber;
		//区域id
		var mCpAreaId;
		//当前frame到顶部的距离
		var mTop;
		//故障情况
		var mBtntTitle;
		//故障地点
		var mPlace;
		//具体地点
		var mSpecificP;
		//name
		var mName;
		//phone
		var mPhone;
		//student
		var mStudent;
		//网络类型：父容器
		var mNetC;
		//网络类型:宽带
		var mBtnWbn;
		//网络类型:wifi
		var mBtnWifi;
		//故障描述
		var mBtntDes
		//故障情况数据
		var mTitleDatas;
		//故障地点数据
		var mPlaceDatas;
		//获取图片(图片view)
		var mGetpic;
		//删除图片
		var mDletepic;
		var TAG_0 = 0;
		var TAG_1 = 1;
		var TAG_2 = 2;
		//图片
		var mPicDatas;
		apiready = function() {
			initData();
			requestCpPl();
			setPopItemClickListener();
		};
		function initData() {
			mTop = api.pageParam.top;
			mUserId = $api.getStorage(MyCom.key_userid);
			mUserNickName = $api.getStorage(MyCom.key_username);
			mUserPhone = $api.getStorage(MyCom.key_userphone);
			mUserAreaId = $api.getStorage(MyCom.key_userareaid);
			mStudentNumber = $api.getStorage(MyCom.key_studentNumber);
		}

		/**
		 * 初始化view
		 * @param{Array}  list1 - 故障地点数组
		 * @param{Array}  list2 - 故障情况数组
		 */
		function initView(list1, list2) {
			var doc = document;
			//获取图片(图片view)
			mGetpic = doc.getElementById('get-pic');
			//删除图片
			mDletepic = doc.getElementById('delete-pic');
			//name
			mName = doc.getElementById('name');
			mName.value = mUserNickName;
			//phone
			mPhone = doc.getElementById('phone');

			//student
			mStudent = doc.getElementById('student');

			if(mStudentNumber != ''){
				mStudent.value = mStudentNumber;
			}

			mPhone.value = mUserPhone;
			//place
			mPlace = doc.getElementById('place');
			//具体地点
			mSpecificP = doc.getElementById('specific-place');
			//故障地点的父容器
			var placeC = doc.getElementById('place-container');
			//网络类型：父容器
			mNetC = doc.getElementsByClassName('net-type-container')[0];
			//网络类型:宽带
			mBtnWbn = doc.getElementById('btn-wbn');
			//网络类型:wifi
			mBtnWifi = doc.getElementById('btn-wifi');
			//故障情况
			mBtntTitle = doc.getElementById('title');
			//故障情况的父布局
			var btntTitleC = doc.getElementById('title-container');
			//故障描述
			mBtntDes = doc.getElementById('input-compldescribe');
			//输入字数
			var wordsCount = doc.getElementById('input-compldescribe-words-n');
			//输入框父容器
			var inputBox = doc.getElementById('get-box-s');
			//设置初始故障地点
			//mPlace.innerText = MyCom.dataFaultTolerant('');
			mCpAreaId = list1[0].protect_id;
			//设置初始故障情况

			//mBtntTitle.innerText = MyCom.dataFaultTolerant('');
			//打开pop
			placeC.onclick = function() {
				showPlaceList(placeC, inputBox, list1);
			}
			btntTitleC.onclick = function() {
				showDesList(btntTitleC, inputBox, list2);
			}
			//显示输入字数
			mBtntDes.onkeyup = function() {
				wordsCount.innerText = mBtntDes.value.length;
			}
			//设置图片
			mGetpic.onclick = function() {
				//弹出选择框
				showPicSelect();
			}
			mDletepic.onclick = function() {
			console.log('--------------pic-delete')
				//删除图片
				mGetpic.src = '../image/icon_touming.png';
				mDletepic.style.display = 'none'
			}
			setPlace(mPlace,list1);
			ssidView();
			//设置提交监听
			setCommitCpListener();
			//设置网络类型事件
			setNetTypeShow(mCpAreaId);
			setNetTypeChange(document.getElementById('btn-wbn-container'), document.getElementById('btn-wifi-container'));
		}

	  //设置故障地点
		function setPlace(view,list){
         var aeraid = $api.getStorage(MyCom.key_userareaid);
				 for (var i = 0; i < list.length; i++) {
				     if(aeraid == list[i].protect_id){
							 view.innerText = list[i].warn_place;
							 return;
						 }
				 }
		}

    //对双SSID的项目做下适配
		function ssidView(){
			if($api.getStorage(MyCom.key_userareaid) >= 10000){
            var cardnumber = document.getElementById('cardnumber');
						cardnumber.style.display = 'none';
						if (mBtnWifi.className.indexOf('active') == -1) {
							mBtnWbn.className = 'icon-normal icon-checked-normal';
							mBtnWifi.className = 'icon-normal active icon-checked';
						}
			}
		}

		/**
		 * 设置图片src
		 */
		function setPicSrc(url) {
			mGetpic.src = url;
			mDletepic.style.display = 'block'
		}

		/**
		 * 设置网络类型的显示
		 */
		function setNetTypeShow(areaid) {
			if (areaid == 11 || areaid == 12) {//如果是深大的区域，就显示网络类型
				mNetC.className = 'net-type-container mg-t flex-container flex-center-v';
			} else {
				mNetC.className = 'net-type-container active mg-t flex-container flex-center-v';
			}
		}

		/**
		 * 网络类型切换
		 */
		function setNetTypeChange(view1, view2) {
			view1.onclick = function() {
				if (mBtnWbn.className.indexOf('active') == -1) {
					mBtnWifi.className = 'icon-normal icon-checked-normal';
					mBtnWbn.className = 'icon-normal active icon-checked';
				}
			}
			view2.onclick = function() {
				if (mBtnWifi.className.indexOf('active') == -1) {
					mBtnWbn.className = 'icon-normal icon-checked-normal';
					mBtnWifi.className = 'icon-normal active icon-checked';
				}
			}
		}

		/**
		 * 展示图片选择按钮
		 */
		function showPicSelect() {
			mPicDatas = [{
				title : '拍照',
				enT : 'camera'
			}, {
				title : '从手机选择',
				enT : 'album'
			}];
			mPopTag = 1;
			MyCom.pop(mPicDatas, 'bottom', './popView.html');
		}

		/**
		 * 展示故障地点的下拉列表
		 * @param{HTMLDocument} view - 弹出popwindow的参照的view
		 * @param{HTMLDocument} view - 弹出popwindow的参照的view
		 * @param{数组} datas - 需要弹出的数据
		 */
		function showPlaceList(view1, view2, datas) {
			var sdatas = [];
			var len = datas.length;
			var i = 0;
			for (; i < len; i++) {
				sdatas.push({
					title : MyCom.dataFaultTolerant(datas[i].warn_place)
				});
			}
			mPopTag = 2;
			MyCom.pop(sdatas, null, './popView.html');
		}

		/**
		 * 展示故障情况的下拉列表
		 * @param{HTMLDocument} view1 - 弹出popwindow的参照的view
		 * @param{HTMLDocument} view2 - 弹出popwindow的参照的view
		 * @param{数组} datas - 需要弹出的数据
		 */
		function showDesList(view1, view2, datas) {
			var sdatas = [];
			var len = datas.length;
			var i = 0;
			for (; i < len; i++) {
				sdatas.push({
					title : MyCom.dataFaultTolerant(datas[i].warn_title)
				});
			}
			mPopTag = 3;
			MyCom.pop(sdatas, null, './popView.html');
		}

		/**
		 * 设置pop选中的item的值
		 * @param{Number} - index 选中的item的下标。
		 * @param{Number} - tag 标记，区分是谁打开的pop。
		 */
		function setPopCheckedText(index, tag) {
			// 如果 tag = = 0，表示此为地点打开的pop,反之，是处理情况。
			if (mPopTag == 2) {
				mPlace.innerText = mPlaceDatas[index].warn_place;
				mCpAreaId = mPlaceDatas[index].protect_id;
				setNetTypeShow(mCpAreaId);
			} else if (mPopTag == 3) {
				var string = mTitleDatas[index].warn_title;
				var flexItem1 = document.getElementsByClassName('flex-item1')[0];title
				var title = document.getElementById('title');
				var btntTitleC1 = document.getElementById('title-container');
				if(string.length > 18){
					 btntTitleC1.style.height = '60px';
					 title.style.height = '60px';
					 flexItem1.style.height = '60px';
				}else if(string.length > 36){
		 		   btntTitleC1.style.height = '90px';
					  title.style.height = '90px';
					 flexItem1.style.height = '90px';
				}else {
		 		  btntTitleC1.style.height = '30px';
					title.style.height = '30px';
					flexItem1.style.height = '30px';
				}
				  console.log('....height....'+ document.defaultView.getComputedStyle(title).height);
				  title.style.background.position = 'right cente';
					mBtntTitle.innerText = string;
			} else if (mPopTag == 1) {
				if (index == 0) {
					getPic('camera');
				} else {
					getPic('album');
				}
			}
		}

		/**
		 * 请求服务器：获取故障地点列表和故障情况列表
		 */
		function requestCpPl() {
			api.showProgress({
			});
			var url = $api.getStorage(MyCom.key_server) + MyRequest.URL_GET_CP_PL;
			var data = {
				values : {
				}
			};
			MyRequest.requestMethod(url, data, function(re) {
				var code;
				var list;
				var tlist;
				if (re) {
					console.log('获取故障地点列表--Result=' + JSON.stringify(re));
					code = re.code;
					if (code == 1) {
						list = re.list;
						tlist = re.titlelist;
						//过滤数据
						if ((!MyCom.objectType.isArray(list) || list.length == 0) && (!MyCom.objectType.isArray(tlist) || tlist.length == 0)) {
							api.hideProgress();
							MyCom.errorTip(2);
						} else {
							mPlaceDatas = filterPlaceDatas(list);
							mTitleDatas = tlist;
							initView(mPlaceDatas, mTitleDatas);
							api.hideProgress();
						}
					} else {
						api.hideProgress();
						api.toast({
							msg : re.msg
						});
					}
				} else {
					api.hideProgress();
					MyCom.errorTip(3);
				}
			});
		}

		/**
		 * 过滤从服务器获取的故障地点数据.
		 * 只过滤深大和深职院
		 */
		function filterPlaceDatas(datas) {
			var fDatas = [];
			var i = 0;
			var j = 0;
			var dl = datas.length;
			if (mUserAreaId == 1) {
				for (; i < dl; i++) {
					if (11 == datas[i].protect_id || 12 == datas[i].protect_id) {
						fDatas.push(datas[i]);
					}
				}
				return fDatas;
			} else if (mUserAreaId == 2) {
				for (; j < dl; j++) {
					if (2 == datas[j].protect_id) {
						fDatas.push(datas[j]);
					}
				}
				return fDatas;
			} else {
				return datas;
			}
		}

		/**
		 * 服务器请求：提交报障。
		 */
		function requestCommitCp() {
			var s1;
			var s2;
			var s3;
			var s4;
			var s5;
			var s6;
			var s7;
			var s8;
			var s9;
			//故障情况
			s1 = mBtntTitle.innerText;
			//故障地点
			s2 = mPlace.innerText;
			//name
			s3 = mName.value;
			//phone
			s4 = mPhone.value;
      //学生号
			s9 = mStudent.value;

			if (mCpAreaId == 11 || mCpAreaId == 12) {
				if (mBtnWbn.className.indexOf('active') != -1) {
					//宽带网络
					s5 = 1;
				} else if (mBtnWifi.className.indexOf('active') != -1) {
					//wifi
					s5 = 2;
				}
			} else {
				s5 = 2;
			}
			//故障描述
			s6 = mBtntDes.value;
			//具体地点
			s7 = mSpecificP.value;

			var useruid = $api.getStorage(MyCom.key_userareaid);
      console.log('.......useruid........'+useruid+'....s9...'+s9);
			if(useruid === '1' || useruid === '2'){
				  if(s9 == '' || s9 == '请输入校园卡号'){
						api.toast({
								msg: '您有选项未填，请填写完成再提交',
								duration: 2000,
								location: 'bottom'
						});
							return;
					}
			}

			if (isEmpty(s1) || isEmpty(s2) || isEmpty(s3) || isEmpty(s4) || isEmpty(s5) || isEmpty(s6) || isEmpty(s7)) {

				api.toast({
				    msg: '您有选项未填，请填写完成再提交',
				    duration: 2000,
				    location: 'bottom'
				});

				return;
			} else {

			}
			s8 = mPic64;
			var url = $api.getStorage(MyCom.key_server) + MyRequest.URL_COMMIT_CP;
			var data = {
				values : {
					'userid' : mUserId,
					'nick_name' : s3,
					'user_phone' : s4,
					'warn_location' : s2,
					'address' : s7,
					'protect_id' : mCpAreaId,
					'internet_type' : s5,
					'title' : s1,
					'content' : s6,
					'school_number':s9
				}
			};
			if (s8 != null) {
				data.values.imges = s8;
			}
			api.showProgress({
			});
			MyRequest.requestMethod(url, data, function(re) {
				var code;
				var list;
				api.hideProgress();
				if (re) {
					console.log('获取故障情况--Result=' + JSON.stringify(re));
					code = re.code;
					if (code == 1) {
						//跳转到提交成功页面。
						openSu(data.values);
					} else {
						api.toast({
							msg : re.msg
						});
					}
				} else {
					MyCom.errorTip(3);
				}
			});
		}

		/**
		 * 打开成功页面
		 * @param{JSON} data - json数据
		 */
		function openSu(data) {
			api.openWin({
				name : 'complaint_comit_succeed',
				url : './complaint_comit_succeed.html',
				pageParam : data
			});
		}

		/**
		 * 检测字符串是否为空或null
		 * return true,是空；反之不是。
		 */
		function isEmpty(s) {
			return s == '' || s == null || s === '请选择';
		}

		function setCommitCpListener() {
			api.addEventListener({
				name : 'CommitCpListener'
			}, function(ret, err) {
				if (ret) {
					requestCommitCp();
				} else {
					MyCom.errorTip(1);
				}
			});
		}

		/**
		 * 从手机获取图片
		 * @param{String} type - 图片源类型，从相册album、图片库library或相机camera获取图片
		 */
		function getPic(type, callback) {
			api.getPicture({
				sourceType : type,
				encodingType : 'png',
				mediaValue : 'pic',
				destinationType : 'base64',
				allowEdit : false,
				quality : 100,
				targetWidth : 720,
				targetHeight : 1080,
				saveToPhotoAlbum : false
			}, function(ret, err) {
				console.log('ret='+JSON.stringify(ret)+'   err='+JSON.stringify(err));
				if (ret) {
					mPic64 = ret.base64Data;
					if (mPic64 == '' || mPic64 == null) {
						return;
					}
					setPicSrc(mPic64);
				} else {

				}
			});
		}

		/**
		 * 设置pop item点击事件
		 * @param{Number} index - pop的item的下标
		 */
		function setPopItemClickListener() {
			var thisIndex;
			api.addEventListener({
				name : 'PopItemClickListener'
			}, function(ret, err) {
				if (ret) {
					thisIndex = ret.value.index;
					setPopCheckedText(thisIndex, mPopTag);
				} else {
					MyCom.errorTip(1);
				}
			});
		}
	</script>
</html>
